<button class="space-button">
  <svg class="space-icon" viewBox="0 0 24 24" width="16" height="16">
    <path fill="currentColor" d="M12 0c-1.2 0-2.2 1-2.2 2.2v3.3c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1V2.2C7.6 1 6.7 0 5.5 0S3.4 1 3.4 2.2v3.3c0 .6-.5 1.1-1.1 1.1S1.1 6.1 1.1 5.5V2.2C1.1 1 0 2 0 3.2 0 16.3 7.7 24 20.8 24 23 24 24 23 24 20.8c0-1.2-1-2.2-2.2-2.2s-2.2 1-2.2 2.2c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-1.2-1-2.2-2.2-2.2s-2.2 1-2.2 2.2c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-2.1 1.7-3.8 3.8-3.8s3.8 1.7 3.8 3.8c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-1.2-1-2.2-2.2-2.2z"></path>
  </svg>
  Launch
</button>

<style>
/* From Uiverse.io by mininaim - Tags: button */
.space-button {
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

.space-icon {
  margin-right: 10px;
  fill: currentColor;
}

/* Light Mode */
@media (prefers-color-scheme: light) {
  .space-button {
    background-color: #0074D9;
    color: #fff;
    box-shadow: 0px 0px 10px 0px #0074D9;
  }

  .space-button:hover {
    box-shadow: 0px 0px 20px 0px #fff;
  }

  .space-button:active {
    box-shadow: none;
    background-color: #001f3f;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .space-button {
    background-color: #f0f0f0;
    color: #000;
    box-shadow: 0px 0px 10px 0px #000;
  }

  .space-button:hover {
    box-shadow: 0px 0px 20px 0px #fff;
  }

  .space-button:active {
    box-shadow: none;
    background-color: #bbb;
  }
}

</style>
